<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/ros-topic/ros-topic.html">
<link rel="import" href="../../bower_components/ros-websocket/ros-websocket.html">
<link rel="import" href="../map-annotator-pose/map-annotator-pose.html">

<dom-module id="map-annotator-app">
  <template>
    <style>
      :host {
        display: block;
        font-family: Sans-serif
      }
      paper-button {
        background-color: #ccc;
        margin-bottom: 10px;
        text-transform: none;
      }
    </style>
    <ros-websocket auto
      ros="{{ros}}"
      on-connection="handleConnection"
      on-close="handleClose"
      on-error="handleError">
    </ros-websocket>
    <ros-topic
      auto
      last-message="{{poseList}}"
      on-message="handlePoseList"
      topic="/pose_names"
      ros="{{ros}}"
      msg-type="map_annotator/PoseNames"
    ></ros-topic>
    <ros-topic
      auto
      id="userActions"
      topic="/user_actions"
      ros="{{ros}}"
      msg-type="map_annotator/UserAction"
    ></ros-topic>
    <h2>Map annotator</h2>
    <div>
      Websocket status: {{status}}
    </div>
    <h3>Poses</h2>
    <paper-button on-tap="handleAdd">Add pose</paper-button>
    <template is="dom-repeat" items="{{poseList.names}}">
      <map-annotator-pose ros="{{ros}}" name="{{item}}"></map-annotator-pose>
    </template>
  </template>

  <script>
    Polymer({

      is: 'map-annotator-app',

      properties: {
        status: {
          type: String,
          value: 'Unknown.',
        },
      },

      handleConnection: function() {
        this.status = 'Connected to websocket server.';
      },

      handleClose: function() {
        this.status = 'Closed connection to websocket server.';
      },

      handleError: function() {
        this.status = 'Error connecting to websocket server.';
      },

      handlePoseList: function(evt) {
        var msg = evt.detail;
        console.log(msg);
      },

      handleAdd: function() {
        var name = prompt('Enter a name:');
        var msg = {
          command: 'create',
          name: name,
          updated_name: ''
        };
        this.$.userActions.publish(msg);
      },

    });
  </script>
</dom-module>
